<template>
  <div class="nav-bar">
    <van-nav-bar
      :title="title"
      :left-text="leftText"
      :right-text="rightText"
      :left-arrow="showLeftArrow"
      :fixed="fixed"
      :placeholder="placeholder"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #right v-if="$slots.right">
        <slot name="right" />
      </template>
    </van-nav-bar>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

interface Props {
  title?: string
  leftText?: string
  rightText?: string
  showLeftArrow?: boolean
  fixed?: boolean
  placeholder?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  title: '',
  leftText: '',
  rightText: '',
  showLeftArrow: true,
  fixed: true,
  placeholder: true
})

const router = useRouter()
const emit = defineEmits(['click-left', 'click-right'])

const onClickLeft = () => {
  emit('click-left')
  if (props.showLeftArrow) {
    router.back()
  }
}

const onClickRight = () => {
  emit('click-right')
}
</script>

<style lang="scss" scoped>
.nav-bar {
  :deep(.van-nav-bar) {
    background-color: var(--white);
    border-bottom: 1px solid var(--border-color);

    .van-nav-bar__title {
      color: var(--text-color);
    }

    .van-nav-bar__text,
    .van-icon {
      color: var(--primary-color);
    }
  }
}
</style>